<template>
	<el-descriptions
		border
		id="show-info"
		:column="1"
		v-loading="isLoading"
		v-if="mp3Exist || isLoading"
	>
		<template #extra><slot name="button"></slot></template>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<DataAnalysis />
					</el-icon>
					作品
				</div>
			</template>
			{{ musicInfo.title }}
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<User />
					</el-icon>
					艺术家
				</div>
			</template>

			<router-link :to="{ path: '/mp3', query: { artist: musicInfo.artist } }">
				{{ musicInfo.artist }}
			</router-link>
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<VideoPlay />
					</el-icon>
					专辑
				</div>
			</template>
			<router-link :to="{ path: '/mp3', query: { album: musicInfo.album } }">
				{{ musicInfo.album }}
			</router-link>
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<CollectionTag />
					</el-icon>
					标签
				</div>
			</template>
			<tags-controller
				:showDelete="false"
				:tags="musicInfo.tags"
				@change="changeTags"
			/>
		</el-descriptions-item>
	</el-descriptions>

	<audioPlayer
		v-if="mp3Exist"
		v-loading="isLoading"
		:musicUrl="url"
		:musicName="musicInfo.title"
		:albumImage="albumImage"
	/>
	<el-empty
		v-if="!mp3Exist && !isLoading"
		description="系统中未发现符合的媒体资料"
	>
		<el-button type="primary" @click="backToIndex">回到总表</el-button>
	</el-empty>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
	getMP3DataImageBuffer,
	isNotCompleteMp3Data,
	mergeMP3Data,
	setTagDivHeight,
} from "@/utils/common";
import {
	User,
	VideoPlay,
	DataAnalysis,
	CollectionTag,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchMP3List } from "@/utils/useRequest";
import audioPlayer from "../common/audio-player.vue";
import { changeTagsHandler, IChangeTagMsg } from "@/utils/tag";
import tagsController from "@/components/common/tags-controller.vue";
import { useMP3RouteData, decodeMP3FromRouteData } from "@/utils/useMP3";

const url = ref("");
const albumImage = ref("");
const router = useRouter();
const mp3Exist = ref(false);
const isLoading = ref(true);
const musicInfo = ref(mergeMP3Data());
const { key, title, album, artist } = useMP3RouteData();

function backToIndex() {
	router.push({
		path: "mp3",
	});
}

function changeTags(msg: IChangeTagMsg) {
	changeTagsHandler(msg, key.value);
}

decodeMP3FromRouteData({ key, title, album, artist })
	.then((res) => {
		if (typeof res !== "string") {
			mp3Exist.value = false;
		} else {
			mp3Exist.value = true;
			url.value = res;
		}
	})
	.catch(() => {
		mp3Exist.value = false;
	})
	.finally(() => {
		isLoading.value = false;
		setTagDivHeight();
	});

if (isNotCompleteMp3Data(musicInfo.value)) {
	fetchMP3List({ key: key.value }).then(({ data }) => {
		musicInfo.value = mergeMP3Data(data[0]);
		const buffer = getMP3DataImageBuffer(musicInfo.value);
		if (buffer !== null) {
			albumImage.value = "data:image/jpeg;base64," + buffer;
		}
	});
}
</script>
